<template>
  <div>
    <table>
      <caption>
        欢迎光临_vue开发的收银系统_水果店
      </caption>
      <th>苹果10￥/斤，折扣&lt;8 折&gt;</th>
      <tr>
        <td>请输入您要购买的斤数<input type="text" v-model="count" /></td>
      </tr>
      <tr>
        <td><button @click="getPrice">结账买单~</button></td>
      </tr>
      <tr>
        <td>
          结账单：总价：{{ sum }}￥元 折后价：{{ discount }}￥元 省了：{{
            save
          }}￥元
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      sum: 0,
      discount: 0,
      save: 0,
    };
  },

  methods: {
    getPrice() {
      this.sum = this.count * 10;
      this.discount = this.sum * 0.8;
      this.save = this.sum - this.discount;
    },
  },
};
</script>

<style lang="less">
table {
  margin: 0 auto;
  width: 400px;
  border: 1px solid #000;
  text-align: center;
  th {
    border: 1px solid #000;
  }
  tr {
    td {
      border: 1px solid #000;
    }
  }
}
</style>